<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D卡片书架</title>
    <style>
        body{
            background-color: antiquewhite;
        }
        #card article{
            float: left;
        }
        article{
            width:300px;
            height:410px;
            /* border: 1px solid; */
            background-color: #fff;
            margin: 100px -150px 0 0;
            transform: perspective(900px) rotateY(60deg);
            box-shadow: 5px 5px 15px #999;
            transition: all 0.5s;
        }
        img{
            width:100px;
            float: left;
            padding-left: 20px;
            padding-right: 20px;
        }
        p{
            padding: 20px;
            text-indent:2em;
            font-size: 12px;
        }
        #card article:hover{
            transform: perspective(0) rotateY(0deg);
            margin: 100px -30px 0 100px;
        }
    </style>
</head>
<body>
    <h1>动感书架</h1>
    <div id="card">
        <article>
            <h2>《第一序列》</h2>
            <img src="img/第一序列.jpg" alt="">
            <p>这次是一个新的故事。</p>
            <p>浩劫余生，终见光明. </p>
            <p>当灾难来临时，精神意志才是人类面对危险的第一序列武器！</p>
        </article>
        <article>
            <h2>《修罗武神》</h2>
            <img src="img/修罗武神.jpg" alt="">
            <p>掌劈天宫镇日月，剑斩幽冥踏九霄，世间凡人万万亿，修罗成神我最狂！</p>
            <P>本天之骄子，被小人陷害，惨遭家族遗弃。落入凡界后，天赋觉醒，我楚枫，誓要杀回九天之上，夺回属于我的一切！</P>
            <P>众生视我如修罗，却不知，我以修罗成武神！！</p>
        </article>
        <article>
            <h2>《第九特区》</h2>
            <img src="img/第九特区.jpg" alt="">
            <p>灾变过后，大地满目疮痍。</p> 
            <P>粮食匮乏，资源紧俏，局势混乱……</P> 
            <P>一位从待规划区杀出来的青年，背对着漫天黄沙，孤身来到九区谋生，却不曾想偶然结识三五好友，一念之差崛起于乱世，开启了一段传奇故事……</p>
        </article>
        <article>
            <h2>《万古第一神》</h2>
            <img src="img/万古第一神.jpg" alt="">
            <p>李天命做梦都要笑醒了。他家的宠物，竟然都是传说中的太古混沌巨兽！</p>
                <P>他的家鸡，是以太阳为食的‘永恒炼狱凤凰’。</P>
                <P>他的黑猫，是以雷霆炼化万界的‘太初混沌雷魔’。</P>
                <p>连他家的小强，都是拥有万亿不死分身的‘万界永生兽’……</p>
        </article>
        <article>
            <h2>《重生支狂暴火法》</h2>
            <img src="img/狂暴火法.jpg" alt="">
            <p>带着200级三转大法师的记忆，陆阳重生回到了十年前，命运跟他开了一个玩笑，曾经失去过的，被夺走的，他都要重新拿回来。</p>
                <p>游戏中的赚钱技巧、副本攻略、传奇任务、装备出处、图纸秘方、战斗技巧他全都知道，且看一个重生玩家如何带着兄弟们横扫万国、焚尽天下，开启一段火神的传奇！</p>
        </article>
        <article>
            <h2>《第一序列》</h2>
            <img src="img/第一序列.jpg" alt="">
            <p>这次是一个新的故事。</p>
            <p>浩劫余生，终见光明. </p>
            <p>当灾难来临时，精神意志才是人类面对危险的第一序列武器！</p>
        </article>
        <article>
            <h2>《修罗武神》</h2>
            <img src="img/修罗武神.jpg" alt="">
            <p>掌劈天宫镇日月，剑斩幽冥踏九霄，世间凡人万万亿，修罗成神我最狂！</p>
            <P>本天之骄子，被小人陷害，惨遭家族遗弃。落入凡界后，天赋觉醒，我楚枫，誓要杀回九天之上，夺回属于我的一切！</P>
            <P>众生视我如修罗，却不知，我以修罗成武神！！</p>
        </article>
        <article>
            <h2>《第九特区》</h2>
            <img src="img/第九特区.jpg" alt="">
            <p>灾变过后，大地满目疮痍。</p> 
            <P>粮食匮乏，资源紧俏，局势混乱……</P> 
            <P>一位从待规划区杀出来的青年，背对着漫天黄沙，孤身来到九区谋生，却不曾想偶然结识三五好友，一念之差崛起于乱世，开启了一段传奇故事……</p>
        </article>
        <article>
            <h2>《万古第一神》</h2>
            <img src="img/万古第一神.jpg" alt="">
            <p>李天命做梦都要笑醒了。他家的宠物，竟然都是传说中的太古混沌巨兽！</p>
                <P>他的家鸡，是以太阳为食的‘永恒炼狱凤凰’。</P>
                <P>他的黑猫，是以雷霆炼化万界的‘太初混沌雷魔’。</P>
                <p>连他家的小强，都是拥有万亿不死分身的‘万界永生兽’……</p>
        </article>
        <article>
            <h2>《重生支狂暴火法》</h2>
            <img src="img/狂暴火法.jpg" alt="">
            <p>带着200级三转大法师的记忆，陆阳重生回到了十年前，命运跟他开了一个玩笑，曾经失去过的，被夺走的，他都要重新拿回来。</p>
                <p>游戏中的赚钱技巧、副本攻略、传奇任务、装备出处、图纸秘方、战斗技巧他全都知道，且看一个重生玩家如何带着兄弟们横扫万国、焚尽天下，开启一段火神的传奇！</p>
        </article>
        
    </div>
    <p>黑风寨工作室</p>
</body>
</html>